import { useState, useContext } from 'react'
import '../../7_0_redux/index.css'
import ProfileSetting from './ProfileSetting'
import { createContext } from '../../8_hooks/2_sources/5_useContext';

export const settingContext = createContext();

export default function Demo() {
    const [username, setUsername] = useState('张三');
    const [unReadCount, setUnReadCount] = useState(1);
    return <>
        <settingContext.Provider value={{
            username, unReadCount,
            setUsername, setUnReadCount
        }}>
            <Header />
            <Setting />
        </settingContext.Provider>

        <p>
            1. Context数据可以在组件树中进行传递，而不用通过props <br />
            2. 目前对Context的源码实现是没有做监听回调的
        </p>
    </>;
}

function Header() {
    const { username, unReadCount } = useContext(settingContext);
    return (
        <div className='header'>
            <span>{username}</span>
            <span className='un-read'>
                未读
                <div className='un-read-num'>{unReadCount}</div>
            </span>
        </div>
    )
}

function Setting() {
    return (
        <div className='setting'>
            设置页面：
            <ProfileSetting />
        </div>
    );
}

